<template>
  <div id="app">
    <!-- <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav>-->
    <!-- <MdDemo /> -->
    <!-- <my-card></my-card> -->
    <!-- <Bar /> -->
    <!-- <base-charts></base-charts> -->
    <div class="main">
      <LeftMenu />
      <div class="md-box">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script>
import BaseCharts from "./components/_baseComponents/BaseCharts";
import Bar from "./components/Bar";
import LeftMenu from "./AppCompoment/leftMenu";
export default {
  components: { BaseCharts, Bar, LeftMenu },
};
</script>

<style lang="scss">
body,html{
  margin: 0;
  padding: 0;
}
.content {
  padding: 0 40px;
  padding-right: 250px;
  color: #5e6d82;
  font-size: 14px;
  h2,h3,h4,h5,h6 {
    width: 100%;
    font-size: 30px;
    color: #333;
  }
  h3{
    font-size: 24px;
  }
  h4{
    font-size: 20px;
  }
  h5{
    font-size: 16px;
  }
  h6{
    font-size: 14px;
  }
  .demo-block {
    margin-bottom: 20px;
    vertical-align: top;
  }
  table {
    width: 100%;
    code {
      background: #f6f7f9;
      color: #d76868;
      padding: 2px 4px;
      border-radius: 2px;
      margin: 0 2px;
      display: inline-block;
    }
    a{
      text-decoration: none;
      color: #4569d4;
      &:hover{
        text-decoration: underline;
      }
    }
  }
  table,
  td,
  th {
    border: 1px solid #ebedf1;
    border-collapse: collapse;
  }
  th {
    background: #f9fafb;
  }
  td,
  th {
    padding: 10px 24px;
  }
  code {
    line-height: 1.8;
    font-family: Menlo, Monaco, Consolas, Courier, monospace;
    font-size: 12px;
    padding: 18px 24px;
    background-color: #fafafa;
    border: 1px solid #eaeefb;
    margin-bottom: 25px;
    border-radius: 4px;
    display: block;
  }
  blockquote {
    padding: 8px 16px;
    background-color: #ecf8ff;
    border-radius: 4px;
    border-left: 5px solid #50bfff;
    margin: 20px 0;
  }
}
#app > .main {
  padding-left: 50px;
  display: flex;
  .left-menu {
    width: 200px;
    overflow-y: auto;
  }
  .md-box {
    flex: 1;
    overflow-y: auto;
    height: 100vh;
  }
}
</style>

